<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>个人会员</h2>
        </template>
      </PageTitle>
      <el-row type="flex" :gutter="10" style="margin-top: 10px">
        <el-col :span="3">
          <el-select
            v-model.number="memberLists.status"
            placeholder="不限会员状态"
            clearable
            @change="handlemember"
          >
            <el-option
              v-for="item in memberStatus"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="memberLists.sort"
            placeholder="按注册时间排序"
            clearable
            @change="handleSortChange"
          >
            <el-option
              v-for="item in registerSort"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="memberLists.regTime"
            placeholder="不限注册时间"
            clearable
            @change="handleregTimeChange"
          >
            <el-option
              v-for="item in registerTime"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="memberLists.platform"
            placeholder="不限注册来源"
            clearable
            @change="handleregChange"
          >
            <el-option
              v-for="item in registerSource"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <!-- <el-col :span="3">
          <el-select v-model="model" placeholder="不限微信绑定">
            <el-option
              v-for="item in weChatBinding"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col> -->
        <el-col :span="3">
          <el-select
            v-model="memberLists.isEmail"
            placeholder="不限邮箱绑定"
            clearable
            @change="handleEmailChange"
          >
            <el-option
              v-for="item in emailBinding"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="memberLists.keyType" @change="handleKeyTypeChange" placeholder="UID" clearable>
            <el-option
              v-for="item in tabsOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-row type="flex">
            <el-input
              v-model="memberLists.keyword"
              placeholder="请输入搜索内容"
              @keyup.enter.native="searchClick"
            ></el-input>
            <el-button type="info" plain @click="searchClick">
              <i class="el-icon-search"></i>
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table
        v-loading="downloadLoading"
        ooltip-effect="dark"
        :data="list"
        style="margin-top: 35px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          label="UID"
          align="center"
          width="60"
          prop="uid"
          fixed
        />
        <el-table-column
          label="会员名称"
          align="center"
          prop="name"
          width="width"
          fixed
        />
        <el-table-column
          label="用户名"
          align="center"
          prop="username"
          width="width"
          fixed
        />
        <el-table-column
          label="手机号"
          align="center"
          prop="mobile"
          width="width"
        />
        <el-table-column
          label="注册时间"
          align="center"
          prop="regTime"
          width="200"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              scope.row.regTime | dateFormat
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="最近登录"
          align="center"
          prop="lastLoginTime"
          width="200"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              scope.row.lastLoginTime | dateFormat
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="会员状态"
          align="center"
          prop="practice_sum"
          width="width"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeStatus(scope.row.uid)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          prop="com_name"
          width="300"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="viewMemberClick(scope.row)"
              >查看</el-button
            >
            <el-button
              type="success"
              size="small"
              @click="editMemberClick(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" size="small" @click="delBtn(scope.row.uid)"
              >删除</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="logClick(scope.row.uid)"
            >
              日志
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="10" style="margin-top: 35px" type="flex" justify="end">
        <el-col :span="8">
          <!-- <el-button type="primary" size="mini" @click="addMemberDialog = true"
            >添加会员</el-button
          > -->
          <el-button type="danger" size="mini" @click="btnDle"
            >删除所选</el-button
          >
        </el-col>
        <el-col>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="memberLists.pageSize"
            :current-page="memberLists.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="text-align: right"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <!-- 日志 -->
    <el-dialog title="操作日志" :visible.sync="operateDialog" width="width">
      <div>
        <el-table :data="logList" style="width: 100%">
          <el-table-column label="时间" width="width" align="center">
            <template slot-scope="scope">
              {{ scope.row.addtime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            label="操作"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="ip" label="IP" width="width" align="center">
          </el-table-column>
          <el-table-column
            prop="ipAddr"
            label="IP归属地"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="platform"
            label="来源"
            width="width"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button @click="operateDialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加会员 -->
    <addMember :addMemberDialog.sync="addMemberDialog" />
    <!-- 查看会员 -->
    <viewMember ref="viewMemberRef" :viewMemberDialog.sync="viewMemberDialog" />
    <!-- 修改会员 -->
    <editMember ref="editMemberRef" :editMemberDialog.sync="editMemberDialog" />
  </div>
</template>

<script>
import addMember from "@/views/user/memberManage/enterpriseMember/components/addMember";
import viewMember from "@/views/user/memberManage/enterpriseMember/components/viewMember";
import editMember from "@/views/user/memberManage/enterpriseMember/components/editMember";
import {
  memberListApi,
  deleteMemberByUIdApi,
  editMemberStatusApi,
  delMemberApi,
  selOperateByUIdApi,
} from "@/api/client";
export default {
  components: {
    addMember,
    viewMember,
    editMember,
  },
  data() {
    return {
      operateDialog: false,
      model: "",
      downloadLoading: false,
      value1: "",
      addMemberDialog: false,
      viewMemberDialog: false,
      editMemberDialog: false,
      memberLists: {
        isEmail: "",
        isOpenId: "",
        keyType: 1,
        keyword: "",
        listType: "personal",
        page: 1,
        pageSize: 10,
        platform: "",
        regTime: "",
        sort: "",
        status: "",
        UType: "",
      },
      // 日志请求参数
      logQuery: {
        page: 1,
        pagesize: 10,
        uid: "",
      },
      logList: [],
      viewList: {},
      uIds: [],
      list: [],
      memberStatus: [
        { value: "", name: "不限会员状态" },
        { value: 0, name: "已锁定" },
      ],
      registerSort: [
        { value: "", name: "按注册时间排序" },
        { value: "logintime", name: "按登录时间排序" },
      ],
      registerTime: [
        { value: "", name: "不限注册时间" },
        { value: 3, name: "3天内" },
        { value: 7, name: "7天内" },
        { value: 15, name: "15天内" },
        { value: 30, name: "30天内" },
      ],
      registerSource: [
        { value: "", name: "不限注册来源" },
        { value: "app", name: "APP" },
        { value: "mobile", name: "手机浏览器" },
        { value: "wechat", name: "微信浏览器" },
        { value: "miniprogram", name: "微信小程序" },
        { value: "tiktok", name: "抖音小程序" },
        { value: "web", name: "电脑浏览器" },
        { value: "system", name: "系统" },
      ],
      weChatBinding: [
        { id: 1, name: "不限微信绑定" },
        { id: 2, name: "已绑定微信" },
        { id: 3, name: "未绑定微信" },
      ],
      emailBinding: [
        { value: "", name: "不限邮箱绑定" },
        { value: 1, name: "已绑定邮箱" },
        { value: 2, name: "未绑定邮箱" },
      ],
      tabsOptions: [
        { value: 1, name: "UID" },
        { value: 2, name: "用户名" },
        { value: 3, name: "手机号" },
        { value: 4, name: "企业名称" },
      ],
    };
  },
  created() {
    this.memberList();
  },
  computed: {},
  methods: {
    // 日志
    async logClick(uid) {
      console.log(uid);
      this.logQuery.uid = uid;
      this.operateDialog = true;
      const res = await selOperateByUIdApi(this.logQuery);
      console.log(res);
      this.logList = res.records;
    },
    // 注册来源
    handleregChange(value) {
      console.log(value);
      this.memberLists.page = 1;
      this.memberList();
    },
    // 邮箱绑定
    handleEmailChange(value) {
      console.log(value);
      this.memberLists.page = 1;
      this.memberList();
    },
    // 按注册时间排序
    handleregTimeChange(value) {
      console.log(value);
      this.memberLists.page = 1;
      this.memberList();
    },
    // 按时间排序
    handleSortChange(value) {
      console.log(value);
      this.memberLists.page = 1;
      this.memberList();
    },
    // 不限会员状态
    handlemember(value) {
      console.log(value);
      this.memberLists.page = 1;
      this.memberList();
    },
    // 会员类型
    handleKeyTypeChange(value) {
      console.log(value);
      this.memberLists.page = 1;
      this.memberList();
    },
    // 点击提交
    searchClick() {
      this.memberList();
    },
    // 封装一个转化时间的函数
    formatSeconds(seconds) {
      // 将秒数转化日期格式
      const date = new Date(seconds);
      return date.toLocaleString();
    },
    // 点击当前页码
    handleCurrentChange(page) {
      console.log(page);
      this.memberLists.page = page;
      this.memberList();
    },
    // 点击切换页码
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.memberLists.pageSize = pageSize;
      this.memberList();
    },
    // 会员列表页面
    async memberList() {
      const res = await memberListApi(this.memberLists);
      console.log(res);
      this.list = res.records.map((item) => ({
        ...item,
        status: item.status === 1,
      }));
      this.total = res.total;
    },
    // 点击左侧复选框
    handleSelectionChange(selection) {
      console.log(selection);
      this.uIds = selection.map((item) => item.uid);
    },
    // 删除
    delBtn(uid) {
      this.$confirm("此操作将永久删除该会员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.uIds.push(uid);
          const res = await delMemberApi(this.uIds);
          console.log(res);
          if (res.code === 1) {
            this.memberList();
            this.uIds = [];
            this.$message.success("删除成功");
          }
        })
        .catch(() => {});
    },
    // 批量删除
    async btnDle() {
      if (this.uIds.length === 0) {
        this.$message.warning("请选择要删除的会员");
        return;
      }
      this.$confirm("此操作将永久删除该会员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await delMemberApi(this.uIds);
          console.log(res);
          if (res.code === 1) {
            this.memberList();
            this.uIds = [];
            this.$message.success("删除成功");
          }
        })
        .catch(() => {});
    },
    // 查看
    viewMemberClick(row) {
      this.viewMemberDialog = true;
      // console.log(row);
      // this.viewList = {
      //   ...row,
      // };
      // console.log(this.formatTime);
      // console.log(this.$refs.viewMemberRef.viewForm);
      this.$refs.viewMemberRef.viewForm = row;
    },
    // 修改
    editMemberClick(row) {
      this.editMemberDialog = true;
      this.$refs.editMemberRef.editForm = row;
      console.log(row);
    },
    // 修改会员状态
    async changeStatus(uid) {
      console.log(uid);
      // 根据当前状态显示不同的确认提示
      const member = this.list.find((item) => item.uid === uid);
      const confirmMessage = !member.status
        ? "确定锁定该会员吗？锁定后该会员将无法登录"
        : "确定开启该会员吗？开启后该会员可以正常登录";

      await this.$confirm(confirmMessage, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await editMemberStatusApi(uid);
          console.log(res);
          if (res.code === 1) {
            this.memberList();
            // 根据操作结果显示不同的成功提示
            const successMessage = !member.status ? "会员已锁定" : "会员已开启";
            this.$message.success(successMessage);
          } else {
            this.$message.error("操作失败");
          }
        })
        .catch(() => {
          // this.$message.info("操作取消");
          this.memberList();
        });
    },
  },
};
</script>

<style scoped></style>
